import React, { useState, useEffect, useCallback, useRef } from 'react';
import style from './index.module.css';
import { useSelector, useDispatch } from 'react-redux';
import { Button, Table } from 'antd';
import { Request } from "@/utils/request.js";
import UploadCard from './upload';
import { toggleUploadFlag, toggleAddTabsList } from '@/redux/home/scientificResearchManagementSystem';

export default function UploadAndShow() {
  const dispatch = useDispatch();
  const uploadflag = useSelector((state) => state.scientificResearchManagementSystem.uploadflag);

  const [data, setData] = useState([]);
  const [pageSize, setPageSize] = useState(12); // 初始 pageSize

  useEffect(() => {
    const fetchData = async () => {
      const res = await Request('scientificResearchManagementSystem/getAll');
      const { data } = res.data;
      setData(data);
    };

    fetchData();

    // 监听窗口大小变化
    const handleResize = () => {
      const newPageSize = Math.floor(window.innerHeight / 70);
      setPageSize(newPageSize);
    };

    window.addEventListener('resize', handleResize);

    // 初始化时设置 pageSize
    handleResize();

    // 清除事件监听
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const handleUpload = () => {
    dispatch(toggleUploadFlag());
  };

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      render: text => <span >{text}</span>,
      ellipsis: true,
      width: 30
    },
    {
      title: '作者',
      dataIndex: 'author',
      key: 'author',
      render: (text, record) => (<span className={style.authorCell}
        onClick={handleAuthorClick(record.id)}>{text}</span>),
      ellipsis: true,
      width: 150
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
      render: text => <span >{text}</span>,
      ellipsis: true,
      width: 80
    },
    {
      title: '论文标题',
      dataIndex: 'dissertationTitle',
      key: 'dissertationTitle',
      render: text => <span >{text}</span>,
      ellipsis: true,
      width: 150
    },
    {
      title: '论文级别',
      dataIndex: 'dissertationLevel',
      key: 'dissertationLevel',
      render: text => <span >{text}</span>,
      ellipsis: true,
      width: 100
    },
    {
      title: '类别',
      dataIndex: 'category',
      key: 'category',
      render: text => <span >{text}</span>,
      ellipsis: true,
      width: 100
    },
    {
      title: '期刊名称',
      dataIndex: 'nameOfTheJournal',
      key: 'nameOfTheJournal',
      render: text => <span >{text}</span>,
      ellipsis: true,
      width: 150
    },
    {
      title: '作者身份',
      dataIndex: 'authorship',
      key: 'authorship',
      render: text => <span >{text}</span>,
      ellipsis: true,
      width: 150
    },
    {
      title: '收录证明',
      dataIndex: 'proofOfInclusion',
      key: 'proofOfInclusion',
      render: text => <span >{text}</span>,
      ellipsis: true,
      width: 120
    },
    {
      title: '责任作者职位',
      dataIndex: 'responsibleAuthorPosition',
      key: 'responsibleAuthorPosition',
      render: text => <span >{text}</span>,
      ellipsis: true,
      width: 80
    }
  ];

  const handleAuthorClick = useCallback((id) => {
    return () => {
      dispatch(toggleAddTabsList(id));
    };
  }, []);

  return (
    <div className={style.container}>
      <Button onClick={handleUpload}>
        上传文件
      </Button>
      <div className={style.showcaseTheList}>
        <Table
          columns={columns}
          dataSource={data}
          // scroll={{ x: true }}
          pagination={{ pageSize }}
        ></Table>
      </div>
      {uploadflag ? <div className={style.uploadContainer}>
        {<UploadCard />}
      </div> : null}
    </div>
  );
}